<template>
	<div class="pay">
		<header class="header border-b20">
			<router-link tag="div" to="/personal/address" class="layout pt15 pb15 auto w92" v-if="true">
				<div class="" v-if="data.address">
					<p class="fs15 c333 bold">{{ data.address.contact_name }}<span class="ml10">{{ data.address.contact_phone }}</span></p>
					<p>{{ data.address.all_name}}</p>
				</div>
				<van-icon name="youjiantou" size="20px"/>
			</router-link>
			<router-link tag="div" to="/personal/address" class="layout pt15 pb15 auto w92" v-else>
				<p class="fs15 c333 bold">请填写您的收货地址</p>
				<van-icon name="youjiantou" size="20px"/>
			</router-link>
		</header>
		<section class="content container border-b20">
			<div class="layout pt15 pb15" v-for="(items,index) in data.goods_data">
                <div class="img-father mr10">
                    <img class="responsive-img img-bg" :src="items.img" alt="" style="width:6rem;height: 6rem;">
                </div>
				<div class="img-right flex_1">
					<div class="layout mb5"><p class="fs16 c333 bold ellipsis">{{ items.goods_name }}</p></div>
					<span class="fs14 c666">规格：{{ items.sku_name }}</span>
					<div class="layout mt15">
						<div style="width:8rem;">
							<strong class="fs18 subject mr15 bold"><i class="fs12 ">￥</i>{{ items.price }}</strong>
							<!-- <p><del class="fs24rem c999">原价：￥{{ items.promotion_price }}</del></p> -->
						</div>
						<van-stepper :disable-input='true' :step="items.min_num" :min="items.min_num" v-model="items.num"  @change="quantityChange"/>
					</div>
				</div>
			</div>
		</section>
		<section class="select border-b20">
			<ul class="w92 auto">
				<li class="layout border-b pt15 pb15 ">
					<strong class="fs15 c333">发票</strong>
					<p>
						<span class="fs14 c666">无</span>
						<van-icon name="youjiantou" size="20px"/>
					</p>
				</li>
				<li class="layout border-b pt15 pb15 ">
					<strong class="fs15 c333">运费</strong>
					<p>
						<span class="fs14 c666">快递包邮</span>
						<!-- <van-icon name="youjiantou" size="20px"/> -->
					</p>
				</li>
				<li class="layout border-b pt15 pb15">
					<strong class="fs15 c333">优惠券</strong>
					<p>
						<span class="fs14 c666"  v-if="data.coupon">
							<template v-if="data.coupon.money">
								立减{{ data.coupon.money }}元
							</template>
						</span>
						<van-icon name="youjiantou" size="20px"/>
					</p>
				</li>
				<li class="felx-left pt15 pb15 ">
					<strong class="fs15 c333">买家留言：</strong>
					<input class="flex_1 w60" type="text" placeholder="选填：填写内容已和卖家协商确认" v-model="buyer_message">
				</li>
			</ul>
		</section> 
		<section class="payment container border-b20">
			<h3 class="pt15 pb15 fs14 black bold border-b">支付方式</h3>
			<van-radio-group v-model="radio">
				<van-cell-group>
					<van-cell title="个人支付" clickable @click="radio = 0">
				      	<van-radio :name="0" />
				    </van-cell>
				    <van-cell title="公司支付" clickable @click="radio = 1">
				      	<van-radio :name="1" />
				    </van-cell>
				</van-cell-group>
			</van-radio-group>
		</section>
		<section class="detail container pt10" style="padding-bottom: 60px;" v-if="data.order">
			<p class="layout pt5 pb5">
				<strong class="fs12 c333">商品金额</strong>
				<span class="fs12 subject">￥{{ data.order.goods_money }}</span>
			</p> 
			<p class="layout pt5 pb5" v-if="data.order.shipping_money">
				<strong class="fs12 c333">运费</strong>
				<span class="fs12 c333">+￥{{ data.order.shipping_money }}</span>
			</p>
			<p class="layout pt5 pb5" v-if="data.order.coupon_monry">
				<strong class="fs12 c333">优惠券</strong>
				<span class="fs12 c333">—￥{{ data.order.coupon_monry }}</span>
			</p>
		</section>
		<footer class="footer pos-fix full-width border-t bottom0 h50 lh50 bg-white layout" v-if="data.order">
			<p class="flex_1 pl20 pr20 align-right"><span class="fs14 black bold">合计:</span><i class="fs16 subject bold">￥{{ total }}</i></p>
			<button class="bg-subject white align-center w40 fs16" @click="pay">立即支付</button>
		</footer>
	</div>
</template>

<script>
	import { Stepper, RadioGroup, Radio  } from 'vant';
	export default{
		components:
        {
            Stepper,
			RadioGroup,
			Radio
        },
		data()
		{
			return{
				buyer_message   : '',
				radio       	: 0,
				price           : 0,
				data        	: [],
				type            : this.$route.query.type,
				params          : [{
							goods_id : this.$route.query.goods_id,
							sku_id   : this.$route.query.sku_id,
							num      : this.$route.query.count
						}]
			}
		},
		computed:
		{
			total()
			{
				var total = 0;

				for( var i in this.data.goods_data)
				{
					total += this.data.goods_data[i].price * this.data.goods_data[i].num
				}
				total = total + this.data.order.shipping_money - this.data.order.coupon_monry

				if(total <= 0){
					total = 0;
					this.price = total;
					return total;
				}
				else
				{
					this.price = total;
					return total.toFixed(2);
				}
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				if(this.$route.query.type){
					this.params = this.$store.state.card_id
				}
				this.$http.post('/order/orderinfo',{ goods : this.params }).then( res => {
					this.data = res.data;
				})
			},
			pay()
			{
				let params = {
					goods:this.params,
					order_type : this.radio,
					address_id : this.data.address.id,
					invoice_id : 0,
					coupon_id  : 0,
					is_cart    : this.type ? 1 : 0,
					buyer_message : this.buyer_message,
				}
				this.$http.post('/order/add',params).then(res=>{
					this.$router.push('/shopping/payment?price='+ this.price)
				})
			},
			quantityChange()
			{
				let params = [];
				for( var i in this.data.goods_data)
				{
					params.push({
						goods_id : this.data.goods_data[i].goods_id,
						sku_id   : this.data.goods_data[i].sku_id,
						num      : this.data.goods_data[i].num
					})
				}	
				this.params = params;

				this.$http.post('/order/orderinfo',{ goods : this.params }).then( res => {
					this.data = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.pay{
		.van-cell{
			padding: 10px 0;
		}
		.van-cell:not(:last-child)::after{
			margin:0;
		}
		.van-hairline--top-bottom::after{
			border-width:0;
		}
		
	}
</style>